<template>
  <div class="goods-detail-container">
    <!-- 商品图片展示区 -->
   <div class="goods-gallery">
  <div class="main-image-container">
    <div class="main-image">
      <img :src="currentImage" :alt="goodsData.name" />
      <!-- 商品标签 -->
      <div class="image-tags" v-if="goodsData.tags && goodsData.tags.length">
        <span class="tag" v-for="tag in goodsData.tags" :key="tag">{{ tag }}</span>
      </div>
    </div>
    
    <!-- 快速信息 -->
    <div class="quick-info">
      <div class="info-item" v-if="goodsData.shippingOptions">
        <span class="icon">🚚</span>
        <span>运费: ¥{{ goodsData.shippingOptions[0].fee }}</span>
      </div>
      <div class="info-item">
        <span class="icon">🔄</span>
        <span>{{ goodsData.returnPolicy || '7天无理由退换' }}</span>
      </div>
    </div>
    
    <!-- 缩略图 -->
    <div class="thumbnail-list">
      <div 
        v-for="(img, index) in goodsData.imageGallery" 
        :key="index"
        class="thumbnail"
        @click="currentImage = img"
        :class="{ active: currentImage === img }"
      >
        <img :src="img" :alt="`${goodsData.name}-${index}`" />
      </div>
    </div>
  </div>
</div>


    <!-- 商品基本信息 -->
    <div class="goods-info">
      <h1 class="goods-title">{{ goodsData.name }}</h1>
      
      <div class="goods-meta">
        <span class="goods-id">商品ID: {{ goodsData.id }}</span>
        <span class="views">浏览: {{ goodsData.viewCount }}次</span>
        <span class="favorites" @click="toggleFavorite">
          <span class="heart" :class="{ active: isFavorite }">♥</span>
          {{ goodsData.favoriteCount || 0 }}
        </span>
      </div>

      <div class="price-section">
        <div class="current-price">
          <span class="price-symbol">¥</span>
          <span class="price-number">{{ goodsData.price.toFixed(2) }}</span>
        </div>
        <div v-if="goodsData.originalPrice" class="original-price">
          原价: <del>¥{{ goodsData.originalPrice.toFixed(2) }}</del>
        </div>
        <div v-if="goodsData.discount" class="discount">
          折扣: {{ (goodsData.discount * 10).toFixed(1) }}折
        </div>
      </div>

      <div class="status-badge" :class="goodsData.status">
        {{ statusTextMap[goodsData.status] }}
      </div>

      <div class="specifications">
        <h3>商品规格</h3>
        <div class="spec-grid">
          <div 
            v-for="(spec, index) in goodsData.specifications" 
            :key="index"
            class="spec-item"
          >
            <span class="spec-key">{{ spec.key }}:</span>
            <span class="spec-value">{{ spec.value }}</span>
          </div>
        </div>
      </div>

      <div class="shipping-options" v-if="goodsData.shippingOptions">
        <h3>配送方式</h3>
        <div class="shipping-option" v-for="option in goodsData.shippingOptions" :key="option.type">
          <input 
            type="radio" 
            :id="option.type" 
            :value="option.type" 
            v-model="selectedShipping"
          >
          <label :for="option.type">
            {{ option.description }} - ¥{{ option.fee }} (预计{{ option.estimatedDays }}天送达)
          </label>
        </div>
      </div>

      <div class="seller-info">
        <h3>卖家信息</h3>
        <div class="seller-content">
          <div class="seller-avatar">
            <img :src="seller.avatar" :alt="seller.name" />
          </div>
          <div class="seller-details">
            <div class="seller-name">{{ seller.name }}</div>
            <div class="seller-rating">
              <span class="stars">★★★★★</span>
              <span class="rating">{{ seller.rating.toFixed(1) }}</span>
            </div>
            <div class="seller-since">
              入驻时间: {{ formatDate(seller.since) }}
            </div>
          </div>
        </div>
      </div>

      <div class="quantity-selector">
        <h3>购买数量</h3>
        <div class="quantity-control">
          <button @click="decreaseQuantity" :disabled="quantity <= 1">-</button>
          <input type="number" v-model.number="quantity" min="1" :max="goodsData.remainCount">
          <button @click="increaseQuantity" :disabled="quantity >= goodsData.remainCount">+</button>
        </div>
        <div class="stock-info">库存: {{ goodsData.remainCount }}件</div>
      </div>

      <div class="action-buttons">
        <button 
          class="btn-contact" 
          @click="showContact = true"
        >
          联系卖家
        </button>
        <button 
          class="btn-cart" 
          @click="addToCart"
          :disabled="goodsData.status !== 'pending'"
        >
          加入购物车
        </button>
        <button 
          class="btn-buy" 
          :disabled="goodsData.status !== 'pending'"
          @click="handleBuy"
        >
          {{ buyButtonText }}
        </button>
      </div>
    </div>

    <!-- 商品详情描述 -->
    <div class="goods-description">
      <h2>商品描述</h2>
      <div class="description-content">
        <p>{{ goodsData.description }}</p>
        
        <div v-if="goodsData.warranty" class="warranty-info">
          <h3>保修信息</h3>
          <p>{{ goodsData.warranty }}</p>
        </div>

        <div v-if="goodsData.accessories" class="accessories">
          <h3>配件清单</h3>
          <ul>
            <li v-for="(item, index) in goodsData.accessories" :key="index">
              {{ item }}
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 问答区域 -->
    <div v-if="goodsData.qa && goodsData.qa.length" class="qa-section">
      <h2>常见问题</h2>
      <div class="qa-list">
        <div v-for="(item, index) in goodsData.qa" :key="index" class="qa-item">
          <div class="question">
            <span class="icon">Q</span>
            <span>{{ item.question }}</span>
          </div>
          <div class="answer">
            <span class="icon">A</span>
            <span>{{ item.answer }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 评价区域 -->
    <div v-if="goodsData.reviews && goodsData.reviews.length" class="reviews-section">
      <h2>商品评价 ({{ goodsData.reviews.length }})</h2>
      <div class="rating-overview">
        <div class="average-rating">
          综合评价: {{ goodsData.rating?.average.toFixed(1) || '暂无' }}
        </div>
        <div v-if="goodsData.rating?.details" class="rating-details">
          <div class="rating-bar" v-for="i in 5" :key="i">
            <span class="stars">{{ 6 - i }}星</span>
            <div class="bar-container">
              <div 
                class="bar" 
                :style="{ width: `${(goodsData.rating.details[`${6 - i}Star` as keyof typeof goodsData.rating.details] || 0) / goodsData.rating.count * 100}%` }"
              ></div>
            </div>
            <span class="count">
              {{ goodsData.rating.details[`${6 - i}Star` as keyof typeof goodsData.rating.details] || 0 }}
            </span>
          </div>
        </div>
      </div>
      <div class="review-list">
        <div v-for="review in goodsData.reviews" :key="review.userId" class="review-item">
          <div class="reviewer">
            <div class="reviewer-avatar">
              <img :src="review.avatar || defaultAvatar" :alt="review.username" />
            </div>
            <span class="name">{{ review.username }}</span>
          </div>
          <div class="review-rating">
            <span class="stars">{{ '★'.repeat(review.rating) }}{{ '☆'.repeat(5 - review.rating) }}</span>
            <span class="rating-date">{{ formatDate(review.createTime) }}</span>
          </div>
          <div class="review-content">
            {{ review.content }}
          </div>
          <div class="review-images" v-if="review.images">
            <img 
              v-for="(img, idx) in review.images" 
              :key="idx"
              :src="img"
              class="review-image"
              @click="showImagePreview(img)"
            />
          </div>
          <div class="review-meta">
            <span class="likes" v-if="review.likes">
              ♥ {{ review.likes }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 联系卖家弹窗 -->
    <div v-if="showContact" class="contact-modal">
      <div class="modal-content">
        <h3>联系卖家</h3>
        <div class="contact-methods">
          <div class="contact-item" v-for="method in goodsData.contactMethods" :key="method">
            <span class="icon">{{ contactIcons[method] }}</span>
            <span>{{ contactLabels[method] }}: {{ seller[method as keyof typeof seller] }}</span>
          </div>
        </div>
        <button class="close-btn" @click="showContact = false">关闭</button>
      </div>
    </div>

    <!-- 图片预览弹窗 -->
    <div v-if="showImagePreviewModal" class="image-preview-modal" @click.self="showImagePreviewModal = false">
      <div class="modal-content">
        <img :src="previewImage" alt="预览图片" />
        <button class="close-btn" @click="showImagePreviewModal = false">×</button>
      </div>
    </div>

    <!-- 购物车添加成功提示 -->
    <div v-if="showCartSuccess" class="cart-success-message">
      商品已成功加入购物车！
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import type { 
  IGoods, 
  IReview,
  IShippingOption,
  ISpecification,
  GoodsStatus,
  TradeType,
  GoodsCondition,
  ICartItem
} from '@/types/goods.ts';

// 默认头像
const defaultAvatar = 'https://randomuser.me/api/portraits/lego/1.jpg';

// 商品数据
const goodsData = ref<IGoods>({
  id: 12345,
  type: "电子产品",
  category: "数码产品",
  name: 'Apple iPad Air 5',
  brand: 'Apple',
  model: 'A2588',
  price: 3999,
  originalPrice: 4799,
  discount: 0.83,
  description: '2023年购买，保修期还剩8个月，配件齐全，无任何划痕。M1芯片性能强劲，10.9英寸Liquid视网膜显示屏，支持P3广色域和原彩显示。',
  specifications: [
    { key: '品牌', value: 'Apple' },
    { key: '型号', value: 'iPad Air 5' },
    { key: '屏幕尺寸', value: '10.9英寸' },
    { key: '芯片', value: 'M1芯片' },
    { key: '存储容量', value: '256GB' },
    { key: '网络', value: 'WiFi版' },
    { key: '颜色', value: '星光色' },
    { key: '新旧程度', value: '几乎全新' }
  ],
  condition: 'like-new',
  warranty: '剩余官方保修8个月',
  accessories: [
    'iPad主机',
    '原装充电器',
    'USB-C数据线',
    '说明书',
    '包装盒'
  ],
  remainCount: 10,
  soldCount: 5,
  viewCount: 856,
  mainImage: 'https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/ipad-air-finish-unselect-gallery-2-202207?wid=5120&hei=2880&fmt=p-jpg&qlt=80&.v=1654904006443',
  imageGallery: [
'https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/ipad-air-finish-unselect-gallery-2-202207?wid=5120&hei=2880&fmt=p-jpg&qlt=80&.v=1654904006443',
    'https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/ipad-air-finish-unselect-gallery-2-202207?wid=5120&hei=2880&fmt=p-jpg&qlt=80&.v=1654904006443',
   'https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/ipad-air-finish-unselect-gallery-2-202207?wid=5120&hei=2880&fmt=p-jpg&qlt=80&.v=1654904006443',
   'https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/ipad-air-finish-unselect-gallery-2-202207?wid=5120&hei=2880&fmt=p-jpg&qlt=80&.v=1654904006443'
  ],
  status: "pending",
  tradeType: "both",
  shippingOptions: [
    {
      type: 'express',
      fee: 15,
      estimatedDays: 3,
      description: '快递配送'
    },
    {
      type: 'self-pickup',
      fee: 0,
      estimatedDays: 0,
      description: '校内自提点自提'
    }
  ],
  returnPolicy: '7天无理由退换',
  paymentMethods: ['支付宝', '微信支付', '银行卡'],
  favoriteCount: 42,
  rating: {
    average: 4.8,
    count: 36,
    details: {
      fiveStar: 28,
      fourStar: 6,
      threeStar: 2,
      twoStar: 0,
      oneStar: 0
    }
  },
  reviews: [
    {
      userId: 'user_123',
      username: '数码爱好者',
      avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
      rating: 5,
      content: '商品非常好，和描述一致，卖家服务态度也很好！包装非常仔细，物流也很快，非常满意的一次购物体验。',
      images: [
        'https://images.unsplash.com/photo-1611186871348-b1ce696e52c9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aXBhZHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60',
        'https://images.unsplash.com/photo-1544244015-0df4b3f8f1d1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8aXBhZHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60'
      ],
      createTime: '2023-06-15T10:30:00Z',
      likes: 12
    },
    {
      userId: 'user_456',
      username: '学生买家',
      rating: 4,
      content: '性价比很高，使用体验不错，屏幕显示效果很好，电池续航也很给力，适合学习和娱乐。',
      createTime: '2023-06-18T14:45:00Z',
      likes: 5
    }
  ],
  qa: [
    {
      question: '是否支持Apple Pencil？',
      answer: '支持第二代Apple Pencil，可以磁吸在iPad侧面进行充电和配对'
    },
    {
      question: '电池健康度如何？',
      answer: '电池健康度98%，循环次数不到20次，续航表现优秀'
    },
    {
      question: '是否支持5G网络？',
      answer: '此款为WiFi版，不支持5G网络，如需蜂窝网络版请选择其他型号'
    }
  ],
  sellerId: 'tech_lover',
  sellerName: '数码达人',
  sellerAvatar: 'https://randomuser.me/api/portraits/men/32.jpg',
  sellerRating: 4.9,
  sellerSince: '2022-03-15',
  contactMethods: ['phone', 'wechat', 'email'],
  businessHours: '9:00-18:00',
  createTime: '2023-06-10T14:20:00Z',
  tags: ['iPad', '平板电脑', 'Apple'],
  location: {
    province: '北京市',
    city: '北京市',
    district: '海淀区',
    address: '中关村大街1号'
  },
  recommendedAge: '全年龄段',
  certifications: ['国行正品', '官方保修']
});

// 卖家数据
const seller = {
  id: 'tech_lover',
  name: '数码达人',
  avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
  rating: 4.9,
  since: '2022-03-15',
  phone: '138****5678',
  wechat: 'digital_lover',
  email: 'tech_lover@example.com'
};

// UI状态
const currentImage = ref(goodsData.value.mainImage);
const isFavorite = ref(false);
const showContact = ref(false);
const quantity = ref(1);
const selectedShipping = ref(goodsData.value.shippingOptions?.[0]?.type || 'express');
const showImagePreviewModal = ref(false);
const previewImage = ref('');
const showCartSuccess = ref(false);

// 购物车数据
const cartItems = ref<ICartItem[]>([]);

// 状态文本映射
const statusTextMap: Record<GoodsStatus, string> = {
  pending: '待交易',
  trading: '交易中',
  sold: '已售出',
  off: '已下架',
  reserved: '已预订'
};

// 联系方式和图标映射
const contactIcons = {
  phone: '📱',
  wechat: '💬',
  email: '✉️'
};

const contactLabels = {
  phone: '电话',
  wechat: '微信',
  email: '邮箱'
};

// 计算属性
const buyButtonText = computed(() => {
  switch (goodsData.value.status) {
    case 'pending': return '立即购买';
    case 'trading': return '交易中';
    case 'sold': return '已售出';
    default: return '不可购买';
  }
});

// 方法
const toggleFavorite = () => {
  isFavorite.value = !isFavorite.value;
  goodsData.value.favoriteCount = (goodsData.value.favoriteCount || 0) + (isFavorite.value ? 1 : -1);
};

const increaseQuantity = () => {
  if (quantity.value < goodsData.value.remainCount) {
    quantity.value++;
  }
};

const decreaseQuantity = () => {
  if (quantity.value > 1) {
    quantity.value--;
  }
};

const addToCart = () => {
  if (goodsData.value.status !== 'pending') return;

  const existingItem = cartItems.value.find(item => item.id === goodsData.value.id);
  
  if (existingItem) {
    // 检查是否超过限购数量
    if (goodsData.value.limitPerUser && (existingItem.quantity + quantity.value) > goodsData.value.limitPerUser) {
      alert(`该商品限购${goodsData.value.limitPerUser}件`);
      return;
    }
    existingItem.quantity += quantity.value;
  } else {
    cartItems.value.push({
      id: goodsData.value.id,
      name: goodsData.value.name,
      price: goodsData.value.price,
      mainImage: goodsData.value.mainImage,
      remainCount: goodsData.value.remainCount,
      quantity: quantity.value,
      selected: true
    });
  }
  
  // 显示添加成功提示
  showCartSuccess.value = true;
  setTimeout(() => {
    showCartSuccess.value = false;
  }, 2000);
  
  console.log('当前购物车内容:', cartItems.value);
};

const handleBuy = () => {
  if (goodsData.value.status === 'pending') {
    goodsData.value.status = 'trading';
    goodsData.value.remainCount -= quantity.value;
    alert('购买成功！卖家将很快与您联系。');
  }
};

const formatDate = (dateString?: string) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return date.toLocaleDateString();
};

const showImagePreview = (img: string) => {
  previewImage.value = img;
  showImagePreviewModal.value = true;
};
</script>

<style scoped>
/* 基础样式 */
body {
  background-color: #f5f5f5;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.goods-detail-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 商品图片展示区 */
.goods-gallery {
  flex: 1;
  min-width: 300px;
  padding: 20px;
}

.main-image {
  margin-bottom: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

.main-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.main-image img:hover {
  transform: scale(1.02);
}

.thumbnail-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.thumbnail {
  width: 80px;
  height: 80px;
  cursor: pointer;
  border: 2px solid #eee;
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.thumbnail.active {
  border-color: #2196f3;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 商品基本信息 */
.goods-info {
  flex: 1;
  min-width: 300px;
  padding: 20px;
}

.goods-title {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
  font-weight: 600;
}

.goods-meta {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  font-size: 14px;
  color: #666;
}

.goods-meta .favorites {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.heart {
  color: #ccc;
  margin-right: 3px;
  font-size: 16px;
  transition: color 0.3s;
}

.heart.active {
  color: #f44336;
}

.price-section {
  margin: 20px 0;
}

.current-price {
  font-size: 28px;
  color: #f44336;
  font-weight: bold;
  display: flex;
  align-items: flex-start;
}

.current-price .price-symbol {
  font-size: 20px;
  margin-right: 2px;
}

.original-price {
  font-size: 16px;
  color: #999;
  margin-top: 5px;
}

.discount {
  display: inline-block;
  background: #f44336;
  color: white;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 14px;
  margin-top: 5px;
}

.status-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 20px;
  font-weight: 500;
}

.status-badge.pending {
  background: #4caf50;
  color: white;
}

.status-badge.trading {
  background: #ff9800;
  color: white;
}

.status-badge.sold {
  background: #f44336;
  color: white;
}

.status-badge.off {
  background: #9e9e9e;
  color: white;
}

/* 商品规格 */
.specifications {
  margin: 25px 0;
}

.specifications h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #333;
  font-weight: 600;
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.spec-item {
  font-size: 14px;
  display: flex;
}

.spec-key {
  color: #666;
  margin-right: 5px;
  font-weight: 500;
}

.spec-value {
  color: #333;
}

/* 配送选项 */
.shipping-options {
  margin: 20px 0;
}

.shipping-options h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #333;
  font-weight: 600;
}

.shipping-option {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.shipping-option input {
  margin-right: 10px;
}

.shipping-option label {
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

/* 卖家信息 */
.seller-info {
  margin: 25px 0;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.seller-info h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #333;
  font-weight: 600;
}

.seller-content {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 10px;
}

.seller-avatar img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #eee;
}

.seller-details {
  flex: 1;
}

.seller-name {
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 16px;
}

.seller-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
}

.stars {
  color: #ffc107;
  font-size: 14px;
}

.rating {
  font-size: 14px;
  color: #666;
}

.seller-since {
  font-size: 14px;
  color: #666;
}

/* 数量选择器 */
.quantity-selector {
  margin: 20px 0;
}

.quantity-selector h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #333;
  font-weight: 600;
}

.quantity-control {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.quantity-control button {
  width: 30px;
  height: 30px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quantity-control button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.quantity-control input {
  width: 50px;
  height: 30px;
  text-align: center;
  border: 1px solid #ddd;
  border-left: none;
  border-right: none;
  font-size: 14px;
}

.stock-info {
  font-size: 14px;
  color: #666;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 15px;
  margin-top: 30px;
}

.btn-contact, .btn-cart, .btn-buy {
  flex: 1;
  padding: 12px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-contact {
  background: #fff;
  border: 1px solid #2196f3;
  color: #2196f3;
}

.btn-contact:hover {
  background: #e3f2fd;
}

.btn-cart {
  background: #ff9800;
  color: white;
}

.btn-cart:hover {
  background: #f57c00;
}

.btn-cart:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.btn-buy {
  background: #2196f3;
  color: white;
}

.btn-buy:hover {
  background: #1976d2;
}

.btn-buy:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* 商品详情描述 */
.goods-description {
  width: 100%;
  margin: 40px 0;
  padding: 20px;
  border-top: 1px solid #eee;
}

.goods-description h2 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #333;
  font-weight: 600;
}

.description-content {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
}

.warranty-info, .accessories {
  margin-top: 20px;
}

.warranty-info h3, .accessories h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #333;
  font-weight: 600;
}

.accessories ul {
  padding-left: 20px;
  margin-top: 10px;
  list-style-type: disc;
}

.accessories li {
  margin-bottom: 5px;
}

/* 问答区域 */
.qa-section {
  width: 100%;
  margin: 40px 0;
  padding: 20px;
  border-top: 1px solid #eee;
}

.qa-section h2 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #333;
  font-weight: 600;
}

.qa-list {
  margin-top: 15px;
}

.qa-item {
  margin-bottom: 20px;
  border-bottom: 1px dashed #eee;
  padding-bottom: 15px;
}

.qa-item:last-child {
  border-bottom: none;
}

.question, .answer {
  display: flex;
  margin-bottom: 10px;
  line-height: 1.6;
}

.question {
  font-weight: 600;
  color: #333;
}

.answer {
  color: #666;
  margin-left: 25px;
}

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #2196f3;
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  margin-right: 8px;
  flex-shrink: 0;
}

/* 评价区域 */
.reviews-section {
  width: 100%;
  margin: 40px 0;
  padding: 20px;
  border-top: 1px solid #eee;
}

.reviews-section h2 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #333;
  font-weight: 600;
}

.rating-overview {
  margin: 20px 0;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 8px;
}

.average-rating {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.rating-details {
  margin-top: 15px;
}

.rating-bar {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.rating-bar .stars {
  width: 50px;
  color: #333;
  font-size: 14px;
}

.bar-container {
  flex: 1;
  height: 10px;
  background: #eee;
  border-radius: 5px;
  margin: 0 10px;
}

.bar {
  height: 100%;
  background: #ffc107;
  border-radius: 5px;
}

.rating-bar .count {
  width: 30px;
  text-align: right;
  font-size: 14px;
  color: #666;
}

.review-list {
  margin-top: 20px;
}

.review-item {
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.reviewer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.reviewer-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.name {
  font-weight: 500;
  color: #333;
}

.review-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 5px 0;
}

.review-rating .stars {
  color: #ffc107;
  font-size: 16px;
}

.rating-date {
  font-size: 12px;
  color: #999;
}

.review-content {
  margin: 10px 0;
  line-height: 1.6;
  color: #333;
}

.review-images {
  display: flex;
  gap: 10px;
  margin: 10px 0;
  flex-wrap: wrap;
}

.review-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.3s;
}

.review-image:hover {
  transform: scale(1.05);
}

.review-meta {
  font-size: 12px;
  color: #999;
  display: flex;
  justify-content: flex-end;
}

.likes {
  color: #f44336;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* 联系卖家弹窗 */
.contact-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 25px;
  border-radius: 8px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.modal-content h3 {
  font-size: 20px;
  margin-bottom: 20px;
  color: #333;
  text-align: center;
}

.contact-methods {
  margin: 20px 0;
}

/* 联系卖家弹窗样式（续） */
.contact-item {
  margin: 15px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-item .icon {
  font-size: 20px;
}

/* 图片预览弹窗 */
.image-preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

.image-preview-modal .modal-content {
  position: relative;
  max-width: 90%;
  max-height: 90vh;
}

.image-preview-modal img {
  max-width: 100%;
  max-height: 80vh;
  display: block;
  border-radius: 8px;
}

.image-preview-modal .close-btn {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 30px;
  cursor: pointer;
}

/* 购物车添加成功提示 */
.cart-success-message {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: #4caf50;
  color: white;
  padding: 12px 24px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 999;
  animation: fadeInOut 3s ease-in-out;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateX(-50%) translateY(20px); }
  10% { opacity: 1; transform: translateX(-50%) translateY(0); }
  90% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(20px); }
}

/* 购物车弹窗样式 */
.cart-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.cart-modal .modal-content {
  background: white;
  padding: 25px;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.cart-modal h3 {
  font-size: 20px;
  margin-bottom: 20px;
  color: #333;
  text-align: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.cart-items {
  margin: 15px 0;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
  position: relative;
}

.cart-item-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 15px;
}

.cart-item-info {
  flex: 1;
}

.cart-item-name {
  font-weight: 500;
  margin-bottom: 5px;
}

.cart-item-price {
  color: #f44336;
  font-weight: bold;
  margin-bottom: 10px;
}

.cart-item-quantity {
  display: flex;
  align-items: center;
  gap: 5px;
}

.cart-item-quantity button {
  width: 25px;
  height: 25px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item-quantity button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cart-item-quantity span {
  width: 30px;
  text-align: center;
}

.remove-item {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 20px;
  color: #999;
  cursor: pointer;
  transition: color 0.3s;
}

.remove-item:hover {
  color: #f44336;
}

.cart-total {
  font-size: 18px;
  font-weight: bold;
  text-align: right;
  margin: 15px 0;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.cart-actions {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.btn-continue {
  flex: 1;
  padding: 12px;
  background: #fff;
  border: 1px solid #2196f3;
  color: #2196f3;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-continue:hover {
  background: #e3f2fd;
}

.btn-checkout {
  flex: 1;
  padding: 12px;
  background: #2196f3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-checkout:hover {
  background: #1976d2;
}
.goods-gallery {
  flex: 1;
  min-width: 300px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  color: #333;
}

.main-image-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.main-image {
  position: relative;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1/1;
}

.main-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s;
}

.image-tags {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 8px;
}

.tag {
  background: rgba(244, 67, 54, 0.9);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.quick-info {
  display: flex;
  justify-content: space-around;
  padding: 12px;
  background: #f9f9f9;
  border-radius: 8px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #666;
}

.info-item .icon {
  font-size: 16px;
}

.thumbnail-list {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  overflow-x: auto;
}

.thumbnail {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border: 2px solid #eee;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
}

.thumbnail.active {
  border-color: #2196f3;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .goods-detail-container {
    flex-direction: column;
  }
  
  .spec-grid {
    grid-template-columns: 1fr;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .cart-modal .modal-content {
    width: 95%;
    padding: 15px;
  }
  
  .cart-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .cart-item-image {
    margin-right: 0;
    margin-bottom: 10px;
  }
  
  .cart-actions {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .goods-title {
    font-size: 20px;
  }
  
  .current-price {
    font-size: 24px;
  }
  
  .action-buttons button {
    padding: 10px;
    font-size: 14px;
  }
  
  .thumbnail {
    width: 60px;
    height: 60px;
  }
}
</style>